<example name="Error Message">
  <file type="html">
    <div id="error-message"></div>
  </file>

  <file type="css">
    :global(.parent) {
    height: 450px;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';

    import ErrorMessage from '@jetbrains/ring-ui/components/error-message/error-message';
    import Link from '@jetbrains/ring-ui/components/link/link';
    import frownIcon from '@jetbrains/icons/frown.svg'


    const renderErrorMessageDemo = () => (
    <div className='parent'>
      <ErrorMessage
        icon={frownIcon}
        code="Disconnected"
        message="no answer from server."
        description="Please try again soon."
      >
        <Link href="/">Go to the home page</Link>
      </ErrorMessage>
    </div>
    );

    render(renderErrorMessageDemo(), document.getElementById('error-message'));
  </file>
</example>
